import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaSwitch } from 'comsMobx';
import { WeaFormItem, WeaSearchGroup, WeaUpload, WeaTools } from 'ecCom';

@inject('sendFormStore')
@observer
export default class SendFormComponent extends React.Component {
  componentDidMount() {
    const { sendFormStore } = this.props;
    const { id, groupid } = this.props;// 父组件向子组件传的每一行的行id
    const num = parseInt(id);
    sendFormStore.buildForm(num, groupid);
  }

  shouldComponentUpdate(nextProps) {
    const { id = 0 } = this.props;
    if (id == nextProps.id) {
      return false;
    }
    const { sendFormStore } = this.props;
    const num = parseInt(nextProps.id);
    sendFormStore.buildForm(num, nextProps.groupid);
    return true;
  }
  getForm() {
    const { sendFormStore } = this.props;
    const { form, conditioninfo } = sendFormStore;
    const { isFormInit } = form;
    let group = [];
    isFormInit && toJS(conditioninfo).map((c, index) => {
      let items = [];
      c.items.map((field) => {
        let comChild = {};
        if (field.conditionType.toUpperCase() == WeaTools.types.UPLOAD && field.domkey[0] == 'Document_Text') {
          comChild = (<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@ayoioq@${field.domkey[0]}`}
            uploadUrl="/api/doc/upload/uploadFile"
            category="string"
            maxUploadSize={5}
            listType="list"
            maxFilesNumber={1}
            multiSelection={false}
            viewAttr={field.viewAttr}
            getShowListDatas={(filesInfo) => {
              if (filesInfo.length > 0) {
                sendFormStore.uploadFile = true;
              } else {
                sendFormStore.uploadFile = false;
              }
            }}
            limitType="doc,docx,pdf,ocx,wps"// 正文上传文件的类型
            datas={sendFormStore.getUploadFieldDatas(field.domkey[0])}
            onChange={(ids, list) => sendFormStore.setUploadFieldMap(field.domkey[0], list)}
            clearWhenReset={false}
            showClearAll={false}
          />);
        } else if (field.conditionType.toUpperCase() == WeaTools.types.UPLOAD && field.domkey[0] == 'Document_Attachments') {
          comChild = (<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@bj4spt@${field.domkey[0]}`}
            uploadUrl="/api/doc/upload/uploadFile"
            category="string"
            maxUploadSize={5}
            listType="list"
            multiSelection={true}
            viewAttr={field.viewAttr}
            datas={sendFormStore.getUploadFieldDatas(field.domkey[0])}
            onChange={(ids, list) => sendFormStore.setUploadFieldMap(field.domkey[0], list)}
            clearWhenReset={false}
            showClearAll={false}
          />);
        } else if (field.conditionType.toUpperCase() == WeaTools.types.BROWSER) {
          comChild = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@s05cek@${field.domkey[0]}`} fieldConfig={field} form={form} onChange={datas => sendFormStore.updateFormFields(datas)} />;
        } else {
          comChild = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@y0pyav@${field.domkey[0]}`} fieldConfig={field} form={form} />;
        }
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7aars5@${field.domkey[0]}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            // ratio1to2
            error={form.getError(field)}
            tipPosition="bottom"
            wrapperCol={{ span: `${field.fieldcol}` }}
          >
            {comChild}
          </WeaFormItem>),
          col: field.colSpan,
          hide: form.isHide(field, () => false),
        });
      });
      // c.title
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@aprt9c@${index}`} needTigger={false} title={''} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }

  render() {
    return <div>{this.getForm()}</div>;
  }
}
